<template>
<div>
  <!-- 版心 -->
  <div class="type_area">
    <!-- 面包屑导航栏 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }">商品详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 弹性布局 -->
    <div class="elastic_layout">
    <!-- 商品放大镜 -->
    <div style="margin-bottom: 40px;">
         <magnifying :pic="data.hd_picture" :pic2="pic2"/>
    </div>  

     <!--商品详情内容 -->
     <div class="details_list" v-if="data.hd_goods && data.hd_list_goods">
         <div><p >{{data.hd_goods[0].gname}}</p></div>
         <div><p>产地：</p><p>{{data.hd_goods[0].address}}</p></div>
         <div><p>价格</p><p>&yen;&nbsp;</p><p>{{price}}</p></div>
         
         <!-- 颜色尺寸 -->
         <div>
          <p>颜色/尺寸</p> 
         <div><p v-for="itme in data.hd_list_goods[0]" :key="itme.lid"
          @click="active=itme.lid,dj_price(itme.goods_price)" 
          :class="{active:active==itme.lid}"
          >{{itme.goods_color}}</p></div>
         </div>
         
        <!-- 数量 -->
         <div>
          <p>数量</p>
          <div class="sl_01">
              <el-input-number size="small" :min="1" step-strictly  v-model="num"></el-input-number>
          </div>
         </div>

         <!--运费 -->
         <div>
          <p>运费</p> 
           <div>
            <el-input
              placeholder="运费"
              v-model="input"
              style="width:131px;"
              :disabled="true">
            </el-input>
           </div>
           &nbsp;&nbsp;
           <p style="font-size:14px;">RMB</p>
         </div>

         <!-- 备注 -->
         <div>
          <p>备注</p> 
           <div>
            <el-input
            type="textarea"
            placeholder="请填写您对商品或运输的特殊要求（最多30个字）"
            v-model="textarea"
            maxlength="30"
            show-word-limit
            resize=none
          >
          </el-input>
           </div>
         </div>
          
          <!-- 结算 -->
          <div>
            <p></p>
             <div><button class="gm_01">立即购买</button></div>
             <div><button class="gwc_01"><i class="el-icon-shopping-cart-2"></i>加入购物车</button></div>
             <div><button class="sc_01"><i class="el-icon-star-off"></i>收藏</button></div>
          </div>
         
     </div>
    </div>  
     <my-fixed/>
  </div>
  
</div>

</template>

<script>
import Magnifying from '@/components/Magnifying.vue';
export default {
  components: { Magnifying },
  data() {
    return {
      num: 1,
      price: 128,
      // 商品详情表内容
      data:[],
      // 传参第一张图片地址给子组件
      pic2:'',
      // 数量
      num: 1,
      // 运费
      input: '',
      // 输入内容
      textarea: '',
      // 价格
      price:0,
      // 激活后的样式
      active:null,
    };
  },
  mounted () {
     // 点击后页面到顶部
        window.scrollTo(0,0)
    // 跳到页面后刷新
  //  if (location.href.indexOf("#reloaded") == -1) {
  //       location.href = location.href + "#reloaded";
  //       location.reload();
  // }
   
        // 获取goods_id
       let g_id=this.$route.query.goods_id;

       this.axios.get(`/details?goods_id=${g_id}`).then(res=>{
       this.data=res.data
       console.log(res);
      //  获取第一张图片地址赋给pic2
       this.pic2=res.data.hd_picture[0].picture_address;
      //  把运费赋给input
       this.input=res.data.hd_goods[0].goods_reight;
      // 把价格赋给price
      let jg_01=res.data.hd_list_goods[1]
      // 遍历lid
      let lid=res.data.hd_list_goods[0]
      jg_01.forEach(e => {
        if(e.da>e.xiao){
            // console.log('测试ddd:',e.da);
          this.price=`${e.xiao} - ${e.da}`
        }else{
          this.price=`${e.da}`
           lid.forEach(e=>{
            this.active=e.lid
            //  console.log('测试aaa:',);
           })
         
          
        }
        
        
      });
   })
  },
  methods: {
    dj_price(e) {
       this.price=e;
    }
  },
};
</script>

<style>
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  font-weight: 700;
  font-size: 16px;
  color: #ff6e6e;
  cursor: pointer;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner{
  font-weight: 700;
  color: #303133;
}
 .el-breadcrumb .el-breadcrumb__inner:hover{
  font-weight: 700;
  font-size: 16px;
  color: #ff6e6e;
  cursor: pointer;
 }
 .el-breadcrumb .el-breadcrumb__inner{
    font-size: 16px;
    color: #606266;
  }
   
   .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
    border-color:#DCDFE6;
   }
   .el-input .el-input__inner{
    border:1px solid #DCDFE6;
   }
   .el-input-number__increase:hover,.el-input-number__decrease:hover{
     color:#ff6e6e;
   }
   .el-input__inner{
    text-align:center;
    font-size: 17px;
   }
   .el-input.is-disabled .el-input__inner{
    color:#ff6e6e;
    height: 30px;
   }
   .el-textarea >.el-textarea__inner{
    width: 500px;
    height: 80px;
   }


</style>
<style lang="scss" scoped>
.type_area{
  width: 1200px;
  margin: 0 auto;
}
.breadcrumb{
  margin: 30px 0;
}

// 弹性布局
.elastic_layout{
  display: flex;
}
.details_list{
  margin-left: 48px;
   width: 700px;
}

//标题
.details_list >div:nth-child(1){
    margin-bottom: 26px;
    >p{
    color: #333;
    font-size: 18px;
    font-weight: 800;
    }
}
// 产地
.details_list >div:nth-child(2){
   margin-bottom: 15px;
   display: flex;
  //  border: 2px solid rgb(255, 110, 110);
   border-radius: 10px;
   padding: 5px 0;
  //  color:rgb(255, 110, 110) ;
  background: #ffe9e9;
  color: #ff6e6e;
  border: 1px solid #ff6e6e;
  width: 120px;
  justify-content: center;
  opacity: 0.8;
  >p{
     font-weight: 600;
  }
}
// 价格
.details_list >div:nth-child(3){
   margin-bottom: 25px;
   height: 54px;
   display: flex;
   align-items: center;
   background-color: #f5f5f5;
   >p:first-child{
    width: 80px;
    color: #333;
    font-size: 14px;
    margin-right: 17px;
    padding-left: 14px;
   }
   >p:nth-child(2){
    color: #ff6e6e;
    font-size: 24px;
   }
   >p:nth-child(3){
    font-weight: 800;
    color: #ff6e6e;
    font-size: 24px;
    font-family: Hiragino Sans GB;
   }
}
// 颜色和尺寸
.details_list >div:nth-child(4){
   display: flex;
  //  justify-content: space-between;
   width: 700px;
   justify-content: center;
  margin-bottom: 25px;
   >p:first-child{
    width:80px;
    color: #333;
    font-size: 14px;
    margin-right: 17px;
    padding-left: 14px;
   }
   >div{
    display: flex;
    flex-wrap: wrap;
    width: 700px;
   }
   >div>p{
    height: 32px;
    font-size: 14px;
    border: 1px solid #e1e1e1;
    padding: 0 16px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    line-height:32px;
    margin-left: 10px;
    margin-bottom: 10px;
    user-select: none;
   }
   >div>p:hover{
    border: 1px solid #ff6e6e;
    box-shadow: 0 0 0 1px #ff6e6e;
   }
   >div>.active{
    border: 1px solid #ff6e6e;
    box-shadow: 0 0 0 1px #ff6e6e;
   }
}

// 数量
.details_list >div:nth-child(5){
 display: flex;
 align-items: center;
 margin-bottom: 25px;
 >p:first-child{
    width: 80px;
    color: #333;
    font-size: 14px;
    margin-right: 17px;
    padding-left: 14px;
   }
}

// 运费
.details_list >div:nth-child(6){
  display: flex;
  margin-bottom: 25px;
   align-items: center;
 >p:first-child{
    width: 80px;
    color: #333;
    font-size: 14px;
    margin-right: 17px;
    padding-left: 14px;
   }
 
}
// 备注
.details_list >div:nth-child(7){
  display: flex;
  margin-bottom: 50px;
 >p:first-child{
    width: 80px;
    color: #333;
    font-size: 14px;
    margin-right: 17px;
    padding-left: 14px;
   }
 
}

// 结算
.details_list >div:nth-child(8){
  display: flex;
  margin-bottom: 100px;
 >p:first-child{
    width: 80px;
    color: #333;
    font-size: 14px;
    margin-right: 17px;
    padding-left: 14px;
   }
  //  立即购买按钮
   >div>.gm_01{
     background: #ffe9e9;
     color: #ff6e6e;
     border: 1px solid #ff6e6e;
     padding: 0 40px;
     height: 44px;
     line-height: 44px;
     text-align: center;
     font-size: 16px;
     cursor: pointer;
     border-radius: 4px;
     margin-right: 15px;
   }
   //  立即购买按钮事件
   >div>.gm_01:hover{
     opacity: 0.8;
   }
   //  购物车按钮图标
   >div>button>.el-icon-shopping-cart-2{
    font-size: 21px;
    margin-right: 5px;
   }
  //  购物车按钮
   >div>.gwc_01{
    padding: 0 40px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    background: #ff6e6e;
    border: 1px solid #ff6e6e;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 15px;
    display: flex;
    align-items: center;
   }
  //  购物车悬停事件
   >div>.gwc_01:hover{
     opacity: 0.8;
   }
  //  收藏图标
   >div>button>.el-icon-star-off{
    font-size: 21px;
    margin-right: 5px;
   }
  //  收藏按钮
   >div>.sc_01{
    background: #fff;
    color: #333;
    border: 1px solid #e1e1e1;
    padding: 0 20px;
    padding: 0 40px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    
   }
   //  收藏按钮悬停事件
   >div>.sc_01:hover{
     border: 1px solid #ff6e6e;
     color: #ff6e6e;
   }
 
}
</style>

    
